<script setup lang="ts">
import { ZoomInOutlined, PhoneOutlined } from '@ant-design/icons-vue'
import { createCall, getList } from '@/apis/callingConfigure/callRecord'
import { useFetchList } from '@/hooks/table/useFetchList'
import { columns } from './consts/tableColumns'
import { message } from 'ant-design-vue'
import BaseQuery from '@/components/BaseQuery/index.vue'
import { queryOptions } from './consts/queryOptions'
// const dateTime = ref([])
const query = reactive({
  callId: '',
  beginTime: '',
  endTime: ''
})
const { tableData, handleSearch, handleTableChange, pagination, loading, initTable } = useFetchList(
  getList,
  query
)
onMounted(() => {
  handleSearch()
})
const handleQuerySearch = () => {
  handleSearch()
}

const drawTitle = ref<string>('呼叫配置')
const open = ref<boolean>(false)
let formState = reactive({
  agentId: '',
  callee: '',
  callerTimeOut: 10,
  calleeTimeOut: 10,
  hiddenCustomer: 0
})
const formRef = ref()

const rules = {
  agentId: [{ required: true, message: '请选择坐席!', trigger: 'change' }],
  callee: [{ required: true, message: '请输入被叫号码!', trigger: 'blur' }]
}
const handleCheck = (record: any) => {
  // TODO
  // open.value = true
}
const handleAdd = () => {
  open.value = true
}
const closeDrawer = () => {
  formRef.value.resetFields()
  formState = reactive({
    agentId: '',
    callee: '',
    callerTimeOut: 10,
    calleeTimeOut: 10,
    hiddenCustomer: 0
  })
  open.value = false
}

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      console.log('values', formState)
      const fn = createCall
      const res = await fn({
        ...formState
      })
      if (res.code === 200) {
        message.success('操作成功！')
        closeDrawer()
        return
      }
      message.error('操作失败！')
    })
    .catch((error: unknown) => {
      console.log('error', error)
    })
}
</script>
<template>
  <BaseQuery :query-options="queryOptions" :query="query" class="mb8" @search="handleQuerySearch" />
  <div class="base-table-content">
    <a-button class="mb8 fr" type="primary" @click="handleAdd">
      <PhoneOutlined />
      呼叫
    </a-button>
    <a-table
      :columns="columns"
      :data-source="tableData"
      bordered
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
      :scroll="{ x: 2200 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operate'">
          <a-button @click="handleCheck(record)" type="link" size="small">
            <ZoomInOutlined />
            查看
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<style scoped lang="less"></style>
